<template>
  <icp-page>
    <i class="icon-ditu icpIconfont" style="color: #fff"></i>
    <TnNewTable
      ref="tableRef"
      header-separate
      :columns="columnsList"
      :tn-table-props="tnTableProps"
      :query-data="queryData"
    >
      <template #header>
        <div class="table-header-left">
          <a-space>
            <a-select
              v-model:value="queryData.businessType"
              style="min-width: 160px; margin-right: 8px"
              placeholder="业务类型"
              allow-clear
              class="gray"
              @change="reloadTable(1)"
            >
              <a-select-option v-for="item in businessTypeList" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
            <DictFormItem
              v-model:value="queryData.projectTypeList"
              class="gray"
              style="min-width: 160px; margin-right: 8px"
              app-code="CONFIG"
              flag="PROJECT_TYPE"
              placeholder="试验类型"
              :is-http="true"
              @change="reloadTable(1)"
            />
            <a-select
              v-model:value="queryData.status"
              class="gray"
              allow-clear
              style="min-width: 160px"
              placeholder="状态"
              @change="reloadTable(1)"
            >
              <a-select-option v-for="item in STATUS_LIST" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-space>
        </div>
        <div>
          <AddBtn type="primary" @click="addConfig(1)">新增</AddBtn>
        </div>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'businessType'">
          <span>{{ businessTypeListMap[record.businessType]?.label }}</span>
        </template>
        <template v-if="column.dataIndex === 'status'">
          <a-tag :color="STATUS_MAP[record.status]?.color">{{ STATUS_MAP[record.status]?.label }}</a-tag>
        </template>
        <template v-if="column.dataIndex === 'edit'">
          <MoreButton :key="Math.random()" :button-list="buttonList" :data="record" />
          <!-- <a-button v-if="record.status === StatusEnum.STOP" type="link" primary @click="configHandle(record, false)"
            >配置</a-button
          >
          <a-button v-if="record.status === StatusEnum.ENABLE" type="link" primary @click="configHandle(record, true)"
            >查看配置</a-button
          >
          <a-button v-if="record.status === StatusEnum.STOP" type="link" primary @click="addConfig(2, record)"
            >编辑</a-button
          >
          <a-button type="link" primary @click="copyHandle(record)">复制</a-button>
          <a-popconfirm
            placement="topRight"
            :title="`是否确认${record.status ? '停用' : '启用'}?`"
            ok-text="确认"
            cancel-text="取消"
            :get-popup-container="(triggerNode):any => triggerNode.parentNode"
            @confirm="handleUpdateStatus(record.drugBusinessConfigId, record.status ? 0 : 1)"
          >
            <a-button
              type="link"
              :primary="record.status !== 1"
              :danger="record.status === 1"
              :loading="statusLoading && record.drugBusinessConfigId === loadingId"
              >{{ record.status ? '停用' : '启用' }}</a-button
            >
          </a-popconfirm>
          <a-popconfirm
            v-if="record.status === StatusEnum.STOP"
            :get-popup-container="(triggerNode):any => triggerNode.parentNode"
            placement="topRight"
            title="是否确认删除?"
            ok-text="确认"
            cancel-text="取消"
            @confirm="delHandle(record.drugBusinessConfigId)"
            @cancel="() => {}"
          >
            <a-button type="link" danger :loading="delLoading && record.drugBusinessConfigId === loadingId"
              >删除</a-button
            >
          </a-popconfirm> -->
        </template>
      </template>
    </TnNewTable>
  </icp-page>
  <add ref="refAdd" @success="reloadTable()"></add>
  <Detail
    ref="refDetail"
    :hide-form="activeItem && activeItem.businessType && businessTypeListMap[activeItem.businessType].hideForm"
    :hide-flow="activeItem && activeItem.businessType && businessTypeListMap[activeItem.businessType].hideFlow"
    :is-input-folder="
      activeItem && activeItem.businessType && businessTypeListMap[activeItem.businessType].hideProjectType
    "
  ></Detail>
</template>
<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue'
import { getBusinessConfigList, updateBusinessStatus, delBusinessConfig } from '@@/api/pharmacy/businessConfig'
import {
  columnsList,
  businessTypeListMap,
  STATUS_MAP,
  StatusEnum,
  businessTypeList,
  filterFormType,
  STATUS_LIST
} from './index'
import { message, Modal } from 'ant-design-vue'
import add from './components/add.vue'
import Detail from './components/detail.vue'
import { useUserStoreWidthOut } from '@/store/modules/user'
const userStore: any = useUserStoreWidthOut()
const queryData = reactive<filterFormType>({
  businessType: undefined,
  projectTypeList: [],
  orgId: userStore.getOrgId,
  status: undefined
})
const tnTableProps = {
  asyncApi: getBusinessConfigList,
  otherTabelHeight: window._CTMS_ORG_TABLE_HEIGHT
}

const buttonList = ref([
  {
    label: '配置',
    visibleHandler: (record) => record.status === StatusEnum.STOP,
    handler: (record) => configHandle(record, false)
  },
  {
    label: '查看配置',
    visibleHandler: (record) => record.status === StatusEnum.ENABLE,
    handler: (record) => configHandle(record, true)
  },
  {
    label: '编辑',
    visibleHandler: (record) => record.status === StatusEnum.STOP,
    handler: (record) => addConfig(2, record)
  },
  {
    label: '复制',
    handler: (record) => copyHandle(record)
  },
  {
    label: (record) => (record.status ? '停用' : '启用'),
    otherProps: (record) => ({
      primary: record.status !== 1,
      danger: record.status === 1
    }),
    loadingHandler: (record) => statusLoading.value && record.drugBusinessConfigId === loadingId.value,
    handler: (record) => {
      handleUpdateStatus(record.drugBusinessConfigId, record.status ? 0 : 1)
    }
  },
  {
    label: '删除',
    otherProps: () => ({
      danger: true
    }),
    visibleHandler: (record) => record.status === StatusEnum.STOP,
    loadingHandler: (record) => delLoading.value && record.drugBusinessConfigId === loadingId.value,
    handler: (record) => {
      Modal.confirm({
        title: '是否确认删除?',
        okText: '确认',
        cancelText: '取消',
        onOk: () => delHandle(record.drugBusinessConfigId),
        onCancel: () => {}
      })
    }
  }
])

const refAdd = ref()
const addConfig = (type, row?) => {
  refAdd.value?.show(type, row)
}
const statusLoading = ref<boolean>(false)
const loadingId = ref<string>('')
const handleUpdateStatus = (drugBusinessConfigId, status) => {
  statusLoading.value = true
  loadingId.value = drugBusinessConfigId
  updateBusinessStatus({
    drugBusinessConfigId,
    status
  })
    .then(() => {
      message.success('操作成功')
      reloadTable()
    })
    .finally(() => {
      statusLoading.value = false
    })
}
const delLoading = ref<boolean>(false)
const delHandle = (id) => {
  delLoading.value = true
  loadingId.value = id
  delBusinessConfig({
    id
  })
    .then(() => {
      message.success('操作成功')
      reloadTable()
    })
    .finally(() => {
      delLoading.value = false
    })
}
//复制
const copyHandle = (record) => {
  refAdd.value?.show(3, record)
}
const refDetail = ref()
const activeItem = ref()
const configHandle = (item, isReadonly) => {
  console.log(item, isReadonly)
  activeItem.value = item
  nextTick(() => {
    refDetail.value?.show(item.drugBusinessConfigId, isReadonly)
  })
}
//
const tableRef = ref()
const reloadTable = (pageNum?) => {
  tableRef.value.reloadTable(pageNum)
}
</script>
